<template>
	<view class="index-list animate__animated animate__slower" >
		<view class="index-list1">
			<view>
			<image :src="item.userpic" mode="widthFix" lazy-load></image>
		 {{item.username}}
			</view>
			<view v-show="!item.isguanzhu" @tap="guanzhu">
				<view class="icon iconfont icon-jia" ></view>关注
				
			</view>
			
		</view>
		<view class="index-list2" @tap="opendetail">
			{{item.title}}
		</view>
		<view class="index-list3" @tap="opendetail" >
			<!--图片-->
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
			<!-- 视频 -->
			<template v-if="item.type=='video'" >
			<view class="icon iconfont icon-biaoqing-weixiao index-list-play"></view>
			<view class="index-list-playinfo">{{item.playnum}}播放{{item.long}}</view>
			</template>
		</view>
		<view class="index-list4">
			<!-- /*判断笑脸是否被点了还是点了哭脸*/ -->
			<view  class="index-list4">
				
			<view class="index-list4"  :class="{'active':(item.infonum.index==1)}"
			@tap="caozuo('ding')">
				<view class="icon iconfont icon-biaoqing-weixiao"></view>{{item.infonum.ding}}</view>
			<view  :class= "{'active':(item.infonum.index==2)}"
			@tap="caozuo('cai')">
				<view class="icon iconfont icon-icon-test2"></view>{{item.infonum.cai}}</view>
			</view>
			<view>
				<view><view class="icon iconfont icon-xiaoxi"></view>
				{{item.commentnum}}</view>
				<view><view class="icon iconfont icon-zhuanfa-"></view>
				{{item.sharenum}}</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		props:{
			item:Object,
			index:Number
		},
		methods:{
			//关注事件
			guanzhu(){
				this.item.isguanzhu=true;
				uni.showToast({
					title:'关注成功'
					
				});
			}
			,
			caozuo(type){
				switch (type){
	            case "ding":
				if(this.item.infonum.index==1){return}
				this.item.infonum.ding++;
				if(this.item.infonum.index==2)
				{
					this.item.infonum.cai--;
				}
				this.item.infonum.index=1;
				break;
				
				case "cai":
				if(this.item.infonum.index==2){return}
				this.item.infonum.cai++;
				if(this.item.infonum.index==1)
				{
					this.item.infonum.ding--;
				}
				this.item.infonum.index=2;
				break;
				}
			},
			 opendetail(){
				 
				 console.log("进入详情页面");
			 }
		}
		
		}
</script>

<style lang="less" scoped>
	.f,.f-ac,.f-ajc{
		display: flex;
	}
	.f-ac,.f-ajc{	
		align-items: center;
		
	}
	.f-ajc{
		justify-content: center;
		
	}
	.index-list{
		padding: 20upx;
		border-bottom: 1upx solid #EEEEEE;
	}
	.index-list1{
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	/*昵称的*/
	.index-list1>view:first-child{
		display: flex;
		align-items: center;
		color: #8F8F94;
	}
	/*头像*/
	.index-list1>view:first-child image{
		width: 90upx;
		height: 90upx;
		border-radius: 100%;
		margin: 10upx;
	}
	/*关注的背景*/
	.index-list1>view:last-child{
		display: flex;
		align-items: center;
		background-color: #0A98D5;
		border-radius: 5upx;
		padding: 0 10upx;
	}
	/*标题*/
	.index-list2{
		padding-top: 18upx;
		font-size: 30upx;
	}
	.index-list3{
		padding-top: 15upx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.index-list3>image{
		width: 100%;
		border-radius: 20upx;
	}
	.index-list4{
		padding: 15upx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.index-list4 view{
			color: #999999;
		}
	.index-list4>view:first-child{
		display: flex;
		
		align-items: center;
	}
	.index-list4>view:last-child,.index-list4>view>view{
		display: flex;
		
		align-items: center;
	}
	
	.index-list4>view>view:first-child,.index-list4>view>view>view{
		margin-right: 15upx;
	}
	
	.index-list-play{
	
		font-size: 120upx;
		position: absolute;
		color: #FFFFFF;
	}
	.index-list-playinfo{
		position: absolute;
		background-color: #51573c;
		border-radius: 40upx;
		color: white;
		bottom: 8upx;
		right: 8upx;
		font-size: 22upx;
		padding: 0 10upx;
	}
	.index-list4 .active,.index-list4 .active>view{
		color: #F0AD4E;
	}
	
	
</style>

